<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="splitview_mobile">
        <title>Overview | Hybrid UI SplitView</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn about the jQuery-based Kendo UI tablet pane and customize the Hybrid UI SplitView component.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/hybrid/splitview/splitview.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/hybrid/splitview/splitview.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="splitview-overview"><a href="#splitview-overview">SplitView Overview</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/m/index#splitview/index">Hybrid UI SplitView widget</a> is a tablet-specific view that consists of two or more mobile Pane widgets.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<p>The mobile Kendo UI Application automatically initializes a mobile SplitView for each element with a <code>role</code> data- attribute set to <code>splitview</code>.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>Unlike most widgets, the SplitView element should not be nested in a view, but rather put as an immediate child of the mobile application element.</p>
</blockquote>

<h3 id="initialize-splitview-with-two-panes"><a href="#initialize-splitview-with-two-panes">Initialize SplitView with Two Panes</a></h3>

<h6>Example</h6>

<pre><code>&lt;div data-role="splitview"&gt;

  &lt;div data-role="pane" id="side-pane"&gt;
      &lt;div data-role="view" data-title="Messages"&gt;
         &lt;ul data-role="listview"&gt;
           &lt;li&gt;&lt;a href="#foo" data-target="main-pane"&gt;Foo&lt;/a&gt;&lt;/li&gt;&lt;!-- link to main pane --&gt;
           &lt;li&gt;&lt;a href="#bar"&gt;Bar&lt;/a&gt;&lt;/li&gt;&lt;!-- link to same pane --&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;

  &lt;div data-role="pane" data-layout="main-default" id="main-pane"&gt;
      &lt;div data-role="view" data-title="Messages"&gt;
          No message selected
      &lt;/div&gt;

      ...

      &lt;div data-role="layout" data-id="main-default"&gt;
          &lt;div data-role="header"&gt;
              &lt;div data-role="navbar"&gt;
                  &lt;span data-role="view-title"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<h2 id="appearance"><a href="#appearance">Appearance</a></h2>

<h3 id="collapsible-panes"><a href="#collapsible-panes">Collapsible Panes</a></h3>

<p>Collapsible panes are automatically hidden when the device is in portrait orientation. The <code>expandPanes</code> method can be wired to a button to display the collapsed panes overlaid on top of the main pane. Tapping on the main pane collapses the overlaid panes. The expanded panes can also be collapsed when a navigation happens in the mane pane.</p>

<p>The example below demonstrates a collapsible pane with a button, which expands it.</p>

<h6>Example</h6>

<pre><code>&lt;style scoped&gt;
    /* do not show side pane activation button in landscape mode */
    .km-horizontal #side-pane-button {
        display: none;
    }
&lt;/style&gt;

&lt;div data-role="splitview" id="my-splitview"&gt;
    &lt;div data-role="pane" data-collapsible="true" data-portrait-width="200"&gt;
        &lt;div data-role="view" data-title="Side Pane"&gt;
            &lt;a data-role="button" data-target="main-pane" href="#main-bar"&gt;Bar (Main pane)&lt;/a&gt;
       &lt;/div&gt;
    &lt;/div&gt;

    &lt;div data-role="pane" style="-webkit-box-flex: 4" id="main-pane" data-layout="main"&gt;
        &lt;div data-role="layout" data-id="main"&gt;
            &lt;div data-role="header"&gt;
                &lt;div data-role="navbar"&gt;
                    &lt;a id="side-pane-button" data-role="button" data-align="left" data-click="expandSidePane"&gt;Side&lt;/a&gt;
                    &lt;span data-role="view-title"&gt;&lt;/span&gt;
                    &lt;a data-role="button" data-align="right" href="#bar"&gt;Bar&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div data-role="view" data-title="Main Pane"&gt;
            Main pane Initial view
        &lt;/div&gt;

        &lt;div data-role="view" data-title="Main Pane Bar View" id="main-bar" data-show="collapseSidePane"&gt;
            Main pane Bar view
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    $(function() {
        new kendo.mobile.Application();
    });

    function expandSidePane() {
        $("#my-splitview").data('kendoMobileSplitView').expandPanes();
    }

    /* called when the bar view is displayed */
    function collapseSidePane() {
        $("#my-splitview").data("kendoMobileSplitView").collapsePanes();
    }
&lt;/script&gt;
</code></pre>

<!--*-->

<h3 id="headers-and-footers"><a href="#headers-and-footers">Headers and Footers</a></h3>

<p>As of Kendo UI Q2 2014, the SplitView supports top-level header and footer elements like a regular view.</p>

<p>The example below demonstrates a SplitView with a top-level footer.</p>

<h6>Example</h6>

<pre><code>&lt;div data-role="splitview"&gt;

  &lt;div data-role="pane" id="side-pane"&gt;
      &lt;div data-role="view" data-title="Messages"&gt;
         &lt;ul data-role="listview"&gt;
           &lt;li&gt;&lt;a href="#foo" data-target="main-pane"&gt;Foo&lt;/a&gt;&lt;/li&gt;&lt;!-- link to main pane --&gt;
           &lt;li&gt;&lt;a href="#bar"&gt;Bar&lt;/a&gt;&lt;/li&gt;&lt;!-- link to same pane --&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;

  &lt;div data-role="pane" data-layout="main-default" id="main-pane"&gt;
      &lt;div data-role="view" data-title="Messages"&gt;
          No message selected
      &lt;/div&gt;


      &lt;div data-role="layout" data-id="main-default"&gt;
          &lt;div data-role="header"&gt;
              &lt;div data-role="navbar"&gt;
                  &lt;span data-role="view-title"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;

  &lt;div data-role="footer"&gt;
     &lt;div data-role="tabstrip"&gt;
        &lt;a href="#tabstrip-profile" data-icon="contacts"&gt;Profile
        &lt;/a&gt;&lt;a href="#tabstrip-sales" data-icon="history"&gt;Sales
        &lt;/a&gt;&lt;a href="#tabstrip-rating" data-icon="favorites"&gt;Rating
        &lt;/a&gt;&lt;a href="#tabstrip-settings" data-icon="settings"&gt;Settings&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    $(function() {
        new kendo.mobile.Application();
    });
&lt;/script&gt;
</code></pre>

<h2 id="customization"><a href="#customization">Customization</a></h2>

<h3 id="configure-proportions"><a href="#configure-proportions">Configure Proportions</a></h3>

<p>By default, the Hybrid UI platform is configured to show a horizontal SplitView with smaller left and bigger right pane in a 1:2 proportion. To resize one of the panes, use CSS to set its width, or adjust the flexibility of the flex boxes. Note that if the width is set, the other pane flexibility should be set to a high number such as 1000.</p>

<p>The example below demonstrates how to set the pane width to 300px or change the proportions to 1:3.</p>

<h6>Example</h6>

<pre><code>&lt;div data-role="splitview" id="main"&gt;
  &lt;div data-role="pane" id="side-pane"&gt;
    &lt;div data-role="view"&gt;
       &lt;a data-role="button" href="#bar" data-target="main-pane"&gt;Bar (main pane)&lt;/a&gt;
       &lt;a data-role="button" href="#baz" data-target="_top"&gt;Baz (application)&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-role="pane" id="main-pane"&gt;
    &lt;div data-role="view" id="foo"&gt;
       Foo
    &lt;/div&gt;
    &lt;div data-role="view" id="bar"&gt;
       Bar
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
    #side-pane {
        min-width: 300px;
    }
    #main-pane {
        -webkit-box-flex: 1000;
        -webkit-flex: 1000;
        flex: 1000;
    }
&lt;/style&gt;
or
&lt;style&gt;
    #main-pane {
        -webkit-box-flex: 3;
        -webkit-flex: 3;
        flex: 3;
    }
&lt;/style&gt;
</code></pre>

<!--_-->

<h3 id="split-views-to-many-panes"><a href="#split-views-to-many-panes">Split Views to Many Panes</a></h3>

<p>Additionally, you are able to split your view to more panes by adding them directly. You can also make them stack vertically by setting <code>data-style="vertical"</code> on your SplitView.</p>

<p>The example below demonstrates how to make the SplitView stack vertically.</p>

<h6>Example</h6>

<pre><code>&lt;div data-role="splitview" id="main" data-style="vertical"&gt;
  &lt;div data-role="pane" id="side-pane"&gt;
    &lt;div data-role="view"&gt;
       &lt;a data-role="button" href="#bar" data-target="main-pane"&gt;Bar (main pane)&lt;/a&gt;
       &lt;a data-role="button" href="#baz" data-target="_top"&gt;Baz (application)&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-role="pane" id="main-pane"&gt;
    &lt;div data-role="view" id="foo"&gt;
       Foo
    &lt;/div&gt;
    &lt;div data-role="view" id="bar"&gt;
       Bar
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<!--_-->

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles and how-to examples on the Hybrid UI components and on the SplitView:</p>

<ul>
<li><a href="/api/javascript/mobile/ui/splitview">Hybrid UI SplitView JavaScript API Reference</a></li>
<li><a href="/controls/hybrid/introduction">Overview of the Hybrid UI Components</a></li>
<li><a href="/controls/hybrid/how-to/fixed-content-area">How to Create Fixed Content Areas with Scroller</a></li>
<li><a href="/controls/hybrid/how-to/relative-content-size-using-flexboxes">How to Create Relative Content Size Using Flexboxes</a></li>
<li><a href="/controls/hybrid/how-to/select-value-from-another-view">How to Select Value from Another View</a></li>
<li><a href="/controls/hybrid/how-to/angular/set-initial-view-using-angular">How to Set Initial View Prior to Initialization in AngularJS</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

